<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是文章详情界面</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="box">
        <el-card class="box-card">
<!--            头部-->
            <div slot="header" class="clearfix" style="text-align: center;">
                <span style="font-size: 20px;">如何做一名合格的Java工程师</span>
                <el-button type="danger" style="float: right;">取消收藏</el-button>
            </div>

<!--            中间-->
            <el-card class="box-card">
                <div  class="text item">
                    <h3>发布人：
                        <span>小灰</span>
                    </h3>

                    <h3>创建时间：
                        <span>2025-1-1 09:52:12</span>
                    </h3>

                    <h3>浏览次数：
                        <span>100</span>
                    </h3>

                    <h3>收藏次数：
                        <span>13052021</span>
                    </h3>

                </div>

                <!--                留言框-->
                <el-form ref="form" :model="form" label-width="80px">
                    <!-- 修改点：添加了:rows="4"和min-height样式 -->
                    <el-input type="textarea" v-model="form.desc" :rows="6" style="min-height: 150px;"></el-input>
                </el-form>

            </el-card>

<!--            尾部-->
            <hr>
            <div class="footer">
                <small style="font-size: 15px;">您关注的小伙伴等人也收藏了该文章</small>
                <br>
                <br>
                <el-row>
                    <el-button>小红</el-button>
                    <el-button>小蓝</el-button>
                </el-row>
            </div>

        </el-card>
    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                form: {
                    desc: '' +
                        '做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，做一名Java工程师需要付出非常大的努力，'
                }
            },
            methods:{
                // 表单提交
                onSubmit() {
                    console.log('submit!');
                }
            }

        })
    </script>
</body>
</html>